<!--  用户管理 -->
<template>
  <div>
    <div class="flex">
      <div class="flex-right">
        <navigation-bar>
          <div class="searchContent">
            <el-input
              v-model="FileName"
              placeholder="请输入文件名"
              size="mini"
              style="width: 150px; margin-right: 10px"
              @keyup.enter.native="searchClick"
            ></el-input>
            <custom-button
              type="search"
              style="margin-right: 10px"
              @searchClick="searchClick"
            ></custom-button>
            <custom-button
              type="reset"
              style="margin-right: 10px"
              @resetClick="resetClick"
            ></custom-button>
            <custom-button
              type="custom"
              icon="el-icon el-icon-check"
              title="审核"
              style="margin-right: 10px"
              @customClick="checkData"
            ></custom-button>
          </div>
        </navigation-bar>
        <table-index
          :dataSource="dataSource"
          :tableColumns="tableColumns"
          :btnList="btnList"
          :pageSize="size"
          :pageCount="pageCount"
          :pageNo="pageNo"
          @pageChange="pageChange"
          @viewRow="viewRow"
          selection
          @handleSelectionChange="handleSelectionChange"
        ></table-index>
      </div>
    </div>
    <div v-if="dialogShow">
      <custom-dialog
        :title="dialogTitle"
        size="large"
        @dialogClose="dialogClose"
      >
        <div class="treeList">
          <el-tree
            ref="tree"
            :data="data"
            node-key="Id"
            @node-click="handleNodeClick"
            :highlight-current="true"
          >
          </el-tree>
        </div>
        <div class="selectTree">
          <label>您选择了：{{ tableName ? tableName : "--" }}</label>
          <el-button type="primary" size="mini" @click="selectFolder">
            选择
          </el-button>
        </div>
      </custom-dialog>
    </div>
  </div>
</template>

<script>
import customDialog from "@/components/customComponents/customDialog";
import customButton from "@/components/customComponents/customForm/customButton";
import tableIndex from "@/components/customComponents/customeTable/tableIndex";
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon, ImageAddress } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { SessionCommon } from "@/libs/sessionCommon";
import { Utility } from "@/libs/utility";
export default {
  components: {
    navigationBar,
    customButton,
    tableIndex,
    customDialog,
  },
  data() {
    return {
      selectList: [],
      data: [],
      selectItemJson: {},
      selectItem: [],
      FileName: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "FamilyName",
          label: "名称",
        },
      ],
      btnList: [],
      // table 相关参数  end
      pageCount: 2,
      size: 20,
      pageNo: 1,

      dialogShow: false,
      dialogTitle: "选择文件关联的族目录",
      tableIndex: "",
      tableName: "",
    };
  },
  methods: {
    handleNodeClick(data) {
      if (typeof data.children == "undefined") {
        this.tableIndex = data.Id;
        this.tableName = data.FolderName;
      } else {
        this.tableIndex = "";
        this.tableName = "--";
      }
    },
    selectFolder() {
      if (this.tableIndex == "") {
        PopupCommon.notify("info", "请选择族目录");
        return;
      }
      var params = {
        FolderId: this.tableIndex,
        ids: this.selectList.map((t) => t.Id),
      };
      let self = this;
      AjaxCommon(`/api/familyresouce/approvefile`, "post", params).then(
        (res) => {
          if (res.data.status == 200) {
            PopupCommon.notify("success", "审核成功");
            self.dialogShow = false;
            self.initPage();
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    // 审核
    checkData() {
      if (this.selectList.length < 1) {
        PopupCommon.notify("error", "请至少选择一个待审核文件");
        return;
      }
      if (this.data.length == 0) {
        PopupCommon.notify("info", "请稍等，族目录数据还在加载中...");
        return;
      }
      this.dialogShow = true;
    },
    handleSelectionChange(d) {
      this.selectList = d;
    },
    dialogClose() {
      this.dialogShow = false;
    },
    searchClick() {
      this.pageNo = 1;
      this.initPage();
    },
    resetClick() {
      this.FileName = "";
      this.pageNo = 1;
      this.initPage();
    },
    // 分页点击事件
    pageChange(p) {
      this.pageNo = p;
      this.initPage();
    },
    viewRow(d) {
      this.type = "look";
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = d.data[t[res]];
          }
        });
      });
      this.formConfig = formConfigItem;
      this.dialogShow = true;
      this.dialogTitle =
        "查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title;
    },
    // 调用收藏
    async initSc() {
      const res = await AjaxCommon(`/api/favorite/getfavoritefamilys`, "get");
      var data = res.data.response;
      if (data && data.length > 0) {
        return data;
      }
      return [];
    },
    // 初始化事件
    async initPage() {
      // const scList = await this.initSc()
      let self = this;
      var imageAddress = ImageAddress;
      AjaxCommon(
        `/api/familyresouce?page=${this.pageNo}&intPageSize=${this.size}&familyFolderId=-1&FileName=${this.FileName}&FileStatus=0`,
        "post",
        []
      ).then((res) => {
        if (res.data.status == 200) {
          var data = res.data.response.data;
          if (data && data.length > 0) {
            self.imgList = [];
            self.imgIndex = 0;
            data.map((t) => {
              t.id = t.Id;
              t.imgSrc = imageAddress + "/" + t.PreImage;
              t.name = t.FamilyName;
              t.show = false;
              t.username = t.UploadUser;
              t.updateTime = t.UploadTime;
              // t.isSc =
              // 	scList.length > 0 &&
              // 	scList.filter((cc) => cc.Id == t.Id).length > 0
              // 		? 1
              // 		: 0
              t.gs = "rfa";
              t.bb = "版本1";

              var imgList = t.MulViewImages;
              var newImgList = [];
              if (imgList) {
                imgList = JSON.parse(imgList);
                if (imgList && imgList.length > 0) {
                  imgList.map((b) => {
                    b = imageAddress + "/" + b;
                    newImgList.push(b);
                    return b;
                  });
                }
                t.MulViewImages = newImgList;
              } else {
                t.MulViewImages = [];
              }
              return t;
            });
          }
          self.dataSource = data;
          self.pageCount = res.data.response.dataCount;
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    initLeftFolder() {
      this.showloading = true;
      let self = this;
      self.data = [];
      AjaxCommon(
        "/api/familyfolder/GetFullFolder?FolderType=1",
        "get",
        null
      ).then((res) => {
        if (res.data.status == 200) {
          let treeDataList = [];
          Utility.createTreeTableData(res.data.response, treeDataList);
          self.data = treeDataList;
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initPage();
      this.initLeftFolder();
    });
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}

.flex .flex-left {
  width: 350px;
  margin-right: 10px;
}

.flex .flex-right {
  flex: 1;
}

.flex .flex-left .navigationBar {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  margin-top: 10px;
}

.flex .flex-left .flex-tree {
  background-color: #fff;
  margin-top: 10px;
  height: calc(100vh - 168px);
  overflow-y: auto;
  padding: 10px;
}

.flex .flex-left .flex-tree .tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .tree-item:hover {
  background-color: #e4f1fe;
}
.flex .flex-left .flex-tree .hover {
  background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.flex .flex-left .navigationBar span {
  float: right;
  margin-right: 10px;
  color: #333;
  cursor: pointer;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}
.treeList {
  height: 500px;
  overflow: auto;
}
.selectTree {
  border-top: 1px solid #e0e0e0;
  text-align: right;
  padding-top: 10px;
}
.selectTree label {
  margin-right: 10px;
}
</style>
